<template>
	<view class="wrap">
		<view class="header-wrap">
			<view class="header">
				<u-icon name="arrow-left" color="#333333" size="24" @click="back"></u-icon>
				<view class="text" @click="toggleFlag">导入路线</view>
				<view class="add" :style="{'opacity':list.length ? '1':'0'}" @click="toggleFlag" v-if="!isEditFlag">管理</view>
				<view class="add" :style="{'opacity':list.length ? '1':'0'}" @click="submitEdit" v-else>完成</view>
			</view>
		</view>
		<view class="body">
			<view v-if="list.length">
				<view class="selected" v-for="(item, index) in list" :key="index">
					<view @click="onSelect(item)">
						<view class="item">
							<view class="gray">托运人单位：{{item.fCompanyName}}</view>
							<view class="info">
								<view class="icon start">始</view>
								<view>{{item.fConsignee}}：{{item.fTel}}</view>
							</view>
							<view class="area">{{item.fCity}}{{item.fAddressDetail}}</view>
						</view>
						<view class="item">
							<view class="gray">收货人单位：{{item.tCompanyName}}</view>
							<view class="info">
								<view class="icon end">收</view>
								<view>{{item.tConsignee}}：{{item.tTel}}</view>
							</view>
							<view class="area">{{item.tCity}}{{item.tAddressDetail}}</view>
						</view>
					</view>
					<view class="between" v-if="isEditFlag">
						<view>
							<!-- <u-checkbox-group v-model="checked" labelColor="#333">
								<u-checkbox  activeColor="#00468C" shape="circle" label="设置默认"></u-checkbox>
							</u-checkbox-group> -->
						</view>
						<view class="flex" @click="onDelete(item.lineInfoId)">
							<u-icon name="trash-fill" size="22"></u-icon>
							<view style="margin-left: 12rpx;">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>

		</view>
		<view class="footer">
			<view class="submit" @click="goAppend">新增线路</view>
		</view>

		<u-modal :show="showModal" content='确定要删除该地址吗？' :closeOnClickOverlay="true" @confirm="confirm" @cancel="cancel"
			@close="cancel" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	import {type} from '@/utils/type.js'
	import {
		queryLine,
		deleteLine
	} from '@/config/api/app.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				value: '',
				list: [],
				isEditFlag: false,
				checked: null,
				projectId: '',

				showModal: false,
				id: '',
			}
		},
		onLoad(options) {
			this.projectId = options.id
			this.getLine()
		},
		methods: {
			...mapMutations(['SELECTADDRESS']),
			onSelect(item) {
				if (this.isEditFlag) return
				if(!item.shippingLng && !item.shippingLat){
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
						method: 'GET',
						data: {
							key: type.mapKey,
							address: `${item.fCity}${item.fAddressDetail}`
						},
						success: res => {
							let latitude = res.data.geocodes[0].location.split(',')[1]
							let longitude = res.data.geocodes[0].location.split(',')[0]
							item.shippingLng = longitude
							item.shippingLat = latitude
						}
					})
				}
				if(!item.receiptLng && !item.receiptLat){
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
						method: 'GET',
						data: {
							key: type.mapKey,
							address: `${item.tCity}${item.tAddressDetail}`
						},
						success: res => {
							let latitude = res.data.geocodes[0].location.split(',')[1]
							let longitude = res.data.geocodes[0].location.split(',')[0]
							item.receiptLng = longitude
							item.receiptLat = latitude
						}
					})
				}
				setTimeout(() => {
					this.SELECTADDRESS(item)
					uni.navigateBack()
				}, 500)
			},
			onDelete(id) {
				this.showModal = true
				this.id = id
			},
			confirm() {
				let data = {
					params: {
						id: this.id
					},
					custom: {
						title: '提交中……'
					}
				}
				deleteLine(data).then((res) => {
					if (res.code == 0) {
						this.showModal = false
						let list = this.list.filter(item => {
							return item.lineInfoId !== this.id
						})
						this.list = list
						uni.$u.toast(res.msg);
					} else {
						this.showModal = false
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancel() {
				this.id = ''
				this.showModal = false
			},
			//	查询线路
			getLine() {
				let data = {
					params: {
						projectId: this.projectId
					},
					custom: {
						title: '获取线路……'
					}
				}
				queryLine(data).then((res) => {
					if (res.code == 0) {
						console.log(res)
						this.list = res.data
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			back() {
				uni.navigateBack()
			},
			goAppend() {
				uni.navigateTo({
					url: `./append?type=2`
				})
			},
			toggleFlag() {
				this.isEditFlag = true
			},
			submitEdit() {
				this.isEditFlag = false
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 164rpx 0 calc(90rpx + env(safe-area-inset-bottom));
		background: #FAFAFA;
	}

	.body {
		width: 100wh;
		height: 100%;
		overflow: auto;

		.empty {
			margin-top: 100rpx;
		}

		.between {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
			border-top: 1rpx solid #F5F7FB;
			margin-top: 24rpx;
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.selected {
		margin-bottom: 16rpx;
		padding: 32rpx;
		background: #fff;

		&:first-child {
			margin-top: 16rpx;
		}

		.item {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			padding-bottom: 32rpx;
			
			&:last-child {
				padding-bottom: 0;
			}
			.gray{
				color: #9E9E9E;
				font-size: 22rpx;
				padding-left: 54rpx;
				margin-bottom: 12rpx;
			}
			.info {
				display: flex;
				align-items: center;

				.icon {
					font-size: 20rpx;
					padding: 8rpx 10rpx;
					border-radius: 12rpx;
					margin-right: 12rpx;
					color: #fff;

					&.start {
						background: #000;
					}

					&.end {
						background: #8c0a0c;
					}
				}
			}

			.area {
				padding-left: 54rpx;
				margin-top: 12rpx;
			}
		}
	}

	.header-wrap {
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 100rpx 24rpx 16rpx;
		background: #fff;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.text {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.add {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.footer {
		position: absolute;
		left: 0;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		width: 100vw;
		padding: 0 32rpx;
		box-sizing: border-box;

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}
</style>
